<!--#
layout("/layouts/store.html"){
#-->
<script src="${base!}/assets/platform/vendor/ueditor/ueditor.config.js"></script>
<script src="${base!}/assets/platform/vendor/ueditor/ueditor.all.js"></script>
<header class="header navbar bg-white shadow">
	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn"
			href="${base}/store/cms/article" data-pjax><i
			class="ti-angle-left"></i> ${msg['globals.button.back']}</a>
	</div>
	<div class="pull-right">
		<div class="btn-group tool-button">
			<button class="btn btn-primary navbar-btn" type="button" id="save">
				${msg['globals.button.save']}</button>
		</div>
	</div>
</header>

<div class="content-wrap">
	<div class="wrapper" style="min-height: 500px; height: 100%;">
		<form id="addForm" role="form" class="form-horizontal parsley-form"
			data-parsley-validate action="${base}/store/cms/article/addDo"
			method="post">

			<div class="col-lg-12">
				<div class="form-group has-feedback">
					<label for="channelId" class="col-sm-2 control-label">${msg['cms.article.column.classid']}</label>

					<div class="col-sm-8">
						<div class="input-group">
							<input id="channelId" type="text" class="form-control"
								   data-parsley-required="true" placeholder="${msg['globals.button.selectclassid']}" disabled
								value="<!--#if(!isEmpty(channel)){#-->${channel.name}<!--#}#-->" />

							<span class="input-group-btn">
								<button type="button" class="btn btn-primary"
									data-toggle="modal" data-target="#dialogSelect">
									<i class="ti-plus"></i>${msg['cms.article.column.select']}
								</button>
							</span>
						</div>
						<input type="hidden" name="channelId"
							value="<!--#if(!isEmpty(channel)){#-->${channel.id}<!--#}#-->">
					</div>
				</div>
				<div class="form-group">
					<label for="title" class="col-sm-2 control-label">${msg['cms.article.column.articletitle']}</label>

					<div class="col-sm-8">
						<input type="text" id="title" class="form-control" name="title"
							data-parsley-required="true" value="" placeholder="${msg['cms.article.column.articletitle']}">
					</div>
				</div>
				<div class="form-group">
					<label for="author" class="col-sm-2 control-label">${msg['cms.article.column.author']}</label>

					<div class="col-sm-8">
						<input type="text" id="author" class="form-control" name="author"
							value="${nickname!}" placeholder="${msg['cms.article.column.author']}">
					</div>
				</div>
				<div class="form-group">
					<label for="info" class="col-sm-2 control-label">${msg['cms.article.column.introduction']}</label>

					<div class="col-sm-8">
						<textarea id="info" name="info" class="form-control"
								  style="width: 100%; height: 80px;"></textarea>
					</div>
				</div>
				<!--发布时间-->
				<!--<div class="form-group">-->
					<!--<label for="at" class="col-sm-2 control-label">${msg['cms.article.column.releasetime']}</label>-->

					<!--<div class="col-sm-8 input-group date form_datetime "-->
						<!--style="padding-left: 16px; padding-right: 16px;"-->
						<!--data-date="1979-09-16T05:25:07Z"-->
						<!--data-date-format="dd MM yyyy - HH:ii p" data-link-field="at">-->
						<!--<input type="text" size="16" readonly class="form-control"-->
							<!--value="${@date.getDateTime()}" data-parsley-required="true">-->
						<!--<span class="input-group-addon"><span-->
							<!--class="glyphicon glyphicon-remove"></span></span> <span-->
							<!--class="input-group-addon"><span-->
							<!--class="glyphicon glyphicon-th"></span></span>-->
					<!--</div>-->
					<!--<input type="hidden" id="at" name="at"-->
						<!--value="${@date.getDateTime()}" />-->
				<!--</div>-->
				<div class="form-group">
					<label for="disabled" class="col-sm-2 control-label">${msg['cms.article.column.cancelrelease']}</label>
					<div class="col-sm-8 switcha">
						<div class="mr15">
							<input type="checkbox" id="disabled" name="disabled"
								class="js-switch-blue" value="true">
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="picurl" class="col-sm-2 control-label">${msg['cms.article.column.headlinefigure']}</label>

					<div class="col-sm-6">
						<div id="queue"></div>
						<div>
							<input id="file_upload" name="file_upload" type="file"
								multiple="false">
						</div>
						<div id="img" style="padding: 5px;"></div>
						<input type="hidden" id="picurl" name="picurl" value="">
					</div>
					<div class="col-sm-2" style="color: red;">建议尺寸：150*150</div>
				</div>
				<div class="form-group">
					<label for="content" class="col-sm-2 control-label">${msg['cms.article.column.articlecontent']}</label>

					<div class="col-sm-8">
						<textarea id="content" name="content"
								  style="width: 100%; height: 200px;"></textarea>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div id="dialogSelect" class="modal fade bs-modal-sm" tabindex="-1"
	role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">×</button>
				<h4 class="modal-title">${msg['cms.article.column.selectcolumn']}</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						<div id="jsTree" class="demo"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">${msg['cms.article.column.cancel']}</button>
				<button type="button" class="btn btn-primary" onclick="select()">${msg['cms.article.column.selectok']}</button>
			</div>
		</div>
	</div>
</div>
<script language="JavaScript">
    function clearFile() {
        $("#img").html("");
        $("#queue").html("");
        $("#picurl").val("");
    }
    function initTreeView() {
        $("#jsTree").jstree({
            plugins: ["wholerow", "json_data"],
            core: {
                data: {
                    dataType: "json",
                    url: function (node) {
                        return node.id === "#" ? "${base}/store/cms/channel/tree" : "${base}/store/cms/channel/tree/" + node.id
                    }
                },
                multiple: false
            }
        }).on("dblclick.jstree", function (node) {
            select();
        });
    }
    //选择父菜单
    function select() {
        var tree = $.jstree.reference("#jsTree");
        var node = tree.get_selected(true);
        $("#addForm #channelId").val(node[0].text);
        $("#addForm input[name='channelId']").val(node[0].id);
        $("#dialogSelect").modal("hide");
    }
    var ue;
    $(document).ready(function () {
        setTimeout(function () {
            ue= new baidu.editor.ui.Editor();
            ue.render('content');
        },500);
        myForm.init();
          $('.form_datetime').datetimepicker({
            format:'yyyy-mm-dd hh:ii:ss',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });  
       
        initTreeView();
        $('#file_upload').uploadifive({
            'auto': true,
            'multi': false,
            'width': '100%',
            'height': '35',
            'buttonText': '${msg['cms.article.column.selectpicture']}',
            'fileType': 'image/jpg,image/jpeg,image/png',
            'fileSizeLimit': 1024,
            'queueSizeLimit': 1,
            'formData': {},
            'queueID': 'queue',
            'uploadScript': '${base}/open/file/upload/image',
            'onUploadComplete': function (file, data) {
                data = JSON.parse(data);
                if (data.code == 0) {
                    Toast.success(data.msg);
                    $("#img").html("<img src='" + data.data + "' style='width:150px;height:95px;'>");
                    $("#picurl").val(data.data);
                } else {
                    clearFile();
                    Toast.error(data.msg);
                }
            },
            'onDrop': function (file, fileDropCount) {
                clearFile();
            },
            'onClearQueue': function (queue) {
                clearFile();
            },
            'onCancel': function () {
                clearFile();
            }
        });
        $("#save").on("click",function(){
            $('#addForm').submit();
        });
        $('#addForm').ajaxForm({
            dataType: 'json',
            beforeSubmit: function (arr, form, options) {
                sublime.showLoadingbar($(".main-content"));
            },
            success: function (data, statusText, xhr, form) {
                if (data.code == 0) {
                    // Toast.success(data.msg);
					window.location.href="${base}/store/cms/article";
                } else {
                    Toast.error(data.msg);
                }
                sublime.closeLoadingbar($(".main-content"));
            }
        });

    });
</script>
<!--#}#-->